<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主页面</title>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="/static/layui/layui.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.0.0/echarts.min.js"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>

<div class="layui-container">
    <!--水平导航栏-->
    <ul class="layui-nav"  style="background:midnightblue;">
        <li class="layui-nav-item">
            <a href="{% url 'main' %}">全国气象展示</a>
        </li>

        <li class="layui-nav-item">
            <a href="{% url 'search' %}">气象数据搜索展示</a>
        </li>

        <li class="layui-nav-item">
            <a href="{% url 'chinaMap' %}">全国天气展示</a>
        </li>

        <li class="layui-nav-item">
            <a href="javascript:;">统计图表</a>
            <!-- 二级菜单 -->
            <dl class="layui-nav-child">
                <dd>
                    <a href="{% url 'max_temp_state' %}">全国地区最高温度</a>
                </dd>
                <dd>
                    <a href="{% url 'min_temp_state' %}">全国地区最低温度</a>

                </dd>
            </dl>
        </li>
       <li class="layui-nav-item layui-layout-admin" style="left: 350px; ">

            <label color="white">
                <!-- 显示信息代码位置 -->
                {{ msg }}
            </label>
            </li>
            <li class="layui-nav-item layui-layout-admin" style="left: 420px; ">
                <a href="{% url 'logout' %}" class="layui-btn" style="background:orange;">登出</a>
            </li>
    </ul>
    <br>
    <!-- 可视化图例显示 -->
    <div id="state_min_temp" style="width: 1200px;height:700px;"></div>
</div>
<script type="text/javascript">
    // 注意:导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;
    });

    var myChart = echarts.init(document.getElementById('state_min_temp'));

    // 指定图表的配置项和数据
    var option = {
        color: ['#85daef'],
        title: {
            text: '各个地区的最低温度'
        },
        tooltip: {},
        legend: {
            data: ['最低温度']
        },
        xAxis: {
            data: {{ name|safe }}
        },
        yAxis: {},
        series: [{
            name: '最低温度',
            type: 'line',
            data:{{ data|safe }},

        }],


    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

</body>
</html>

